<template>
  <div>
    <h1>插槽示例</h1>

    <!-- 默认插槽 -->
    <DefaultSlot>
      <p>这是默认插槽的内容。</p>
    </DefaultSlot>

    <!-- 具名插槽 -->
    <NamedSlot>
      <template v-slot:header>
        <p>这是头部内容。</p>
      </template>
      <template v-slot:content>
        <p>这是主要内容。</p>
      </template>
      <template v-slot:footer>
        <p>这是底部内容。</p>
      </template>
    </NamedSlot>

    <!-- 作用域插槽 -->
    <ScopedSlot>
      <template v-slot="slotProps">
        <p>{{ slotProps.item.text }}</p>
      </template>
    </ScopedSlot>
  </div>
</template>

<script>
import DefaultSlot from '@/components/DefaultSlot.vue'
import NamedSlot from '@/components/NamedSlot.vue'
import ScopedSlot from '@/components/ScopedSlot.vue'

export default {
  components: {
    DefaultSlot,
    NamedSlot,
    ScopedSlot,
  },
}
</script>

<style scoped>
h1 {
  margin-bottom: 20px;
}
</style>
